<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>传感</title>
	<link href="style/css/bootstrap.min.css" rel="stylesheet">
	<link href="style/css/style.css" rel="stylesheet">
	<script src="style/js/jquery-1.11.0.min.js"></script>
	<script src="style/js/bootstrap.min.js"></script>
	<style>
		#sites{
			display: block;
		}
	</style>
</head>
<body>
	<div class="container-fluid main">
		<div class="left">
			<div class="row logo">
				<div class="media">
				  	<div class="media-left">
				    	<a href="#">
				      		<img class="media-object logo-img" src="style/css/logo2.png" alt="瑞海科技">
				    	</a>
				  	</div>
				  	<div class="media-body">
				    	<p class="logo-name">瑞海科技</p>
				  </div>
				</div>
			</div>
			<div class="row">
                <ul id="manageList">
                    <li class="default">
                        <div>
                            <img src="style/css/home2.png" alt="home">
                            <a href="home.html" id="home">首页</a>
                        </div>
                    </li>
                    <li class="default active">
                        <div class="pull-left">
                            <img src="style/css/site1.png" alt="site">
                            <a href="site.html" id="site">站点</a>
                        </div>
                        <div class="toggle pull-right" onclick="isShow1()">
                            <img id="choose1" src="style/css/upArrow.png" alt="">
                        </div>
                        <div class="clearfix"></div>                            
                    </li>
                    <div id="sites">
                    	<div class="site-item">
	                        <a href="#" class="item checked">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>    
                    </div>
                    <li class="default">
                        <div>
                            <img src="style/css/history2.png" alt="history">
                            <a href="history.html" id="history">历史数据</a>
                        </div>                               
                    </li>
                    <li class="default">
                        <div class="pull-left">
                            <img src="style/css/userManage2.png" alt="admin">
                            <a href="userManage.html" id="userManage">后台管理</a>
                        </div>
                        <div class="toggle pull-right" onclick="isShow2()">
                            <img id="choose2" src="style/css/downArrow.png" alt="">
                        </div>
                        <div class="clearfix"></div>                               
                    </li>
                    <div id="manage">
                    	<div class="manage-item">
                            <img src="style/css/green.png" alt="user">
                            <a href="userManage.html" class="large-item checked">用户管理</a>
                        </div>
                        <div class="manage-item">
                            <img src="style/css/yellow.png" alt="site">
                            <a href="siteManage.html" class="large-item">站点管理</a>
                        </div>
                        <div class="manage-item device">
                        	<div class="pull-left">
	                            <img src="style/css/pink.png" alt="device">
                            	<a href="cameraManage.html" class="large-item">设备管理</a>
	                        </div>
	                        <div onclick="isShow3()">
	                            <img id="choose3" src="style/css/add.png" alt="add">
	                        </div>
	                        <div class="clearfix"></div>
                        </div>
                        <div id="device">
                        	<div class="device-item">
		                        <a href="cameraManage.html" class="small-item">摄像头</a>
		                    </div>
		                    <div class="device-item">
		                        <a href="senseManage.html" class="small-item">传感</a>
		                    </div>
                        </div>                        
                        <div class="manage-item">
                            <img src="style/css/gray.png" alt="admin">
                            <a href="publishAnnounce.html" class="large-item">发布公告</a>
                        </div>
                    </div>
                </ul>
            </div>
            <div class="row footer text-center">
				Copyright &copy; 2018 | &nbsp; 瑞海集团  版权所有 &nbsp;
			</div>
			<script type="text/javascript">
                $(document).ready(function(){ 
                    $("#sites div a").each(function(){  
                        $this = $(this);  
                        if($this[0].href==String(window.location)){
                        	$("#manageList li").removeClass("active");
                        	$("#manageList li:eq(1)").addClass("active"); 
                            $("#sites div a").removeClass("checked");
                            $this.addClass("checked");  
                        } 
                    });
                    $("#manage div a").each(function(){  
                        $this = $(this);  
                        if($this[0].href==String(window.location)){
                        	$("#manageList li").removeClass("active");
                        	$("#manageList li:eq(3)").addClass("active");
                        	console.log($("#manageList li:eq(3)")); 
                            $("#manage div a").removeClass("checked");
                            $this.addClass("checked");  
                        } 
                    }); 
                });
                function isShow1(){
					var sites=document.getElementById('sites');
					$("#choose1").src="style/css/downArrow.png";
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(1)").addClass("active");
			        if(sites.style.display == 'none'){  
			            sites.style.display = 'block';
			            $('#choose1').attr('src', 'style/css/upArrow.png');
			        }else{
			            sites.style.display = 'none';
			            $('#choose1').attr('src', 'style/css/downArrow.png');
			        }
			    } 
			    function isShow2(){
					var manage=document.getElementById('manage');
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(3)").addClass("active");
			        console.log($("#manageList li:eq(3)")); 
			        if(manage.style.display == 'none'){  
			            manage.style.display = 'block';
			            $('#choose2').attr('src', 'style/css/upArrow.png');
			        }else{
			            manage.style.display = 'none';
			            $('#choose2').attr('src', 'style/css/downArrow.png');
			        }
			    }
			    function isShow3(){
					var device=document.getElementById('device');
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(3)").addClass("active");
			        console.log($("#manageList li:eq(3)")); 
			        if(device.style.display == 'none'){  
			            device.style.display = 'block';
			            $('#choose3').attr('src', 'style/css/reduce.png');
			        }else{
			            device.style.display = 'none';
			            $('#choose3').attr('src', 'style/css/add.png');
			        }
			    }  
            </script>
		</div>
		<div class="right">
			<div class="row header">
				<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
					<div class="row search">
						<input type="search" placeholder="Search…" class="searchInput">
						<a href="#" class="searchLink"></a>
					</div>
				</div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-right">
                    <div class="row userMsg pull-right">
                    	<a href="#" class="bell" onclick="javasrcipt:ShowDiv2('warnMsg')"><img src="style/css/bell.png" alt="bell" class="bellImg"><span class="badge">7</span></a>
                        <a href="#" onclick="javasrcipt:ShowDiv('personalCenter','fade')">   
                    		<img src="style/css/people.png" alt="people">
                        	<span class="username">用户名</span>
                    	</a>
                        <a type="button" class="btn exit">安全退出</a>      
                    </div>                   
                </div> 
			</div>
			<div class="row welcome">
				<div class="col-lg-3 col-md-4 col-sm-8 col-xs-8">
					<ul class="list-inline tab2 row"> 
						<li class="tabLi camera col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
							<img src="style/css/camera2.png" alt="home">
		                    <a href="site.html" class="uncheckedA">视频</a>
						</li> 
						<li class="tabLi sense col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
							<img src="style/css/sense1.png" alt="home">
		                    <a href="sense.html" class="checkedA">传感</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-6 col-md-8 hidden-sm hidden-xs pull-right">
					<p class="msg pull-right">欢迎您使用！<span class="small">您最后一次登录时间为 <span>02/01/2019 05:34:59 PM</span></span></p>
				</div>
			</div>
			<div class="row senseMsg">
				<div class="row parameters">
					<div class="col-lg-2 col-md-3 col-sm-12 safety">
						<div class="text-center safetyUnit">安全指数(%)</div>
						<div class="text-center safetyIndex">优</div>
					</div>
					<div class="col-lg-10 col-md-9 col-sm-12 paras">
						<div class="row para1">
							<div class="col-lg-3 col-md-6 col-sm-12">
								<div class="row">
									<span class="para1Name">温度</span>
									<img src="style/css/wendu.png" alt="home">
									<span class="para1Unit">单位（&#8451;）</span>
								</div>
								<div class="row">
									<div class="col-sm-6 para1Items">
										<div class="para1Item">
											<span class="para1ItemName">温度1：</span>
											<span class="para1ItemValue">24</span>
										</div>
										<div class="para1Item">
											<span class="para1ItemName">温度2：</span>
											<span class="para1ItemValue warning">41.4</span>
										</div>
										<div class="para1Item">
											<span class="para1ItemName">温度3：</span>
											<span class="para1ItemValue">23.6</span>
										</div>
									</div>
									<div class="col-sm-6">
										<div class="warningValue">预警值<span>30</span>&#8451;</div>
										<img src="style/css/wendu_warn.png" alt="home">
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-6 col-sm-12">
								<div class="row">
									<span class="para1Name">湿度</span>
									<img src="style/css/shidu.png" alt="home">
									<span class="para1Unit">单位（RH）</span>
								</div>
								<div class="row">
									<div class="col-sm-6 para1Items">
										<div class="para1Item">
											<span class="para1ItemName">湿度1：</span>
											<span class="para1ItemValue">62.5%</span>
										</div>
										<div class="para1Item">
											<span class="para1ItemName">湿度2：</span>
											<span class="para1ItemValue">71.6%</span>
										</div>
										<div class="para1Item">
											<span class="para1ItemName">湿度3：</span>
											<span class="para1ItemValue">72.2%</span>
										</div>
									</div>
									<div class="col-sm-6">
										<div class="warningValue">预警值<span>6.0</span></div>
										<img src="style/css/shidu_warn.png" alt="home">
									</div>
								</div>
								
							</div>
							<div class="col-lg-3 col-md-6 col-sm-12">
								<div class="row">
									<span class="para1Name">硫化氢</span>
									<img src="style/css/liuhuaqing.png" alt="home">
									<span class="para1Unit">单位（ppm）</span>
								</div>
								<div class="row">
									<div class="col-sm-6 para1Items">
										<div class="para1Item">
											<span class="para1ItemName">硫化氢1：</span>
											<span class="para1ItemValue">87.6</span>
										</div>
										<div class="para1Item">
											<span class="para1ItemName">硫化氢2：</span>
											<span class="para1ItemValue">93.6</span>
										</div>
									</div>
									<div class="col-sm-6">
										<div class="warningValue">预警值<span>99</span></div>
										<img src="style/css/liuhuaqing_warn.png" alt="home">
									</div>
								</div>
								
							</div>
							<div class="col-lg-3 col-md-6 col-sm-12">
								<div class="row">
									<span class="para1Name">甲烷</span>
									<img src="style/css/jiawan.png" alt="home">
									<span class="para1Unit">单位（LEL）</span>
								</div>
								<div class="row">
									<div class="col-sm-6 para1Items">
										<div class="para1Item">
											<span class="para1ItemName">甲烷1：</span>
											<span class="para1ItemValue">45.3%</span>
										</div>
										<div class="para1Item">
											<span class="para1ItemName">甲烷1：</span>
											<span class="para1ItemValue">36.4%</span>
										</div>
									</div>
									<div class="col-sm-6">
										<div class="warningValue">预警值<span>2.5</span></div>
										<img src="style/css/jiawan_warn.png" alt="home">
									</div>
								</div>								
							</div>
						</div>
						<div class="row para2">
							<div class="col-lg-3 col-md-4 col-sm-4 col-xs-4 para2Item">
								<div class="col-lg-3 col-md-12 col-sm-12">
									<img src="style/css/fengsu.png" alt="home">
								</div>
								<div class="col-lg-8 col-md-12 col-sm-12 para2Value">
									<div class="para2Name">风速</div>
									<div>
										<span class="para2Digital">2.3</span>
										<span class="para2Unit">m/s</span>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-4 col-sm-4 col-xs-4 para2Item">
								<div class="col-lg-3 col-md-12 col-sm-12">
									<img src="style/css/fengxiang.png" alt="home">
								</div>
								<div class="col-lg-8 col-md-12 col-sm-12 para2Value">
									<div class="para2Name">风向</div>
									<div>
										<span class="para2Digital">西南偏南</span>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-4 col-sm-4 col-xs-4 para2Item">
								<div class="col-lg-3 col-md-12 col-sm-12">
									<img src="style/css/yuliang.png" alt="home">
								</div>
								<div class="col-lg-8 col-md-12 col-sm-12 para2Value">
									<div class="para2Name" >雨量</div>
									<div>
										<span class="para2Digital">23.40</span>
										<span class="para2Unit">mm</span>
									</div>
								</div>
							</div>
						</div>
					</div>	
				</div>
				<div class="row">
					<div class="col-lg-6 col-md-6 col-sm-12 senseWarnMsg">
						<div class="row senseWarnTip">
							传感预警信息提示
						</div>
						<div class="row text-center senseWarnIcon">
							<img src="style/css/warn_y.png" alt="home" class="senseWarnImg img-responsive center-block">
						</div>
						<div class="row">
							<ul>
								<li class="row senseWarnItem">
									<div class="senseWarnTitle pull-left">机房温度过高，触发预警，请及时处理</div>
									<a class="senseWarnLink pull-right">确认并处理</a>
								</li>
								<li class="row senseWarnItem">
									<div class="senseWarnTitle pull-left">机房温度过高，触发预警，请及时处理</div>
									<a class="senseWarnLink pull-right">确认并处理</a>
								</li>
								<li class="row senseWarnItem">
									<div class="senseWarnTitle pull-left">机房温度过高，触发预警，请及时处理</div>
									<a class="senseWarnLink pull-right">确认并处理</a>
								</li>
								<li class="row senseWarnItem">
									<div class="senseWarnTitle pull-left">机房温度过高，触发预警，请及时处理</div>
									<a class="senseWarnLink pull-right">确认并处理</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-lg-6 col-md-6 col-sm-12 weatherMsg">
						<div class="row weather">
							<div class="row city">
								<span class="glyphicon glyphicon-map-marker"></span>
								<span id="city"></span>
							</div>
							<div class="row">
								<div class="row currentDay">
									<div class="col-lg-4 col-md-4 col-sm-4">
										<div id="week"></div>
										<div id="date"></div>
									</div>
									<div class="col-lg-4 col-md-4 col-sm-4">
										<span id="minimumTem"></span>
										<span id="maximumTem"></span>
									</div>
									<div class="col-lg-4 col-md-4 col-sm-4">
										<img id="weaImg" src="" alt="wea_img">
									</div>
								</div>
								<div class="row weaItems">
									<div class="col-lg-6 col-md-12 col-sm-6 weaItem">
										<span class="weaItemName">空气指数：</span>
										<span id="air" class="weaItemValue"></span>
									</div>
									<div class="col-lg-6 col-md-12 col-sm-6 weaItem">
										<span class="weaItemName">空气指数等级：</span>
										<span id="airLevel" class="weaItemValue"></span>
									</div>
									<div class="col-lg-6 col-md-12 col-sm-6 weaItem">
										<span class="weaItemName">风&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向：</span>
										<span id="win" class="weaItemValue"></span>
									</div>
									<div class="col-lg-6 col-md-12 col-sm-6 weaItem">
										<span class="weaItemName">风&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;力：</span>
										<span id="winSpeed" class="weaItemValue"></span>
									</div>
									<div class="col-lg-12 col-md-12 col-sm-12 weaItem">
										<span class="weaItemName">小&nbsp;&nbsp;贴&nbsp;&nbsp;士：</span>
										<span id="airTips" class="weaItemValue"></span>
									</div>	
								</div>
							</div>
							<div class="row">
								<div class="col-lg-2 col-md-4 col-sm-4 text-center">
									<div class="week" id="tomorrow"></div>
									<div class="weaDays">
										<div><img class="weaImg" src="" alt="wea_img"></div>
										<div class="tem"></div>
									</div>
								</div>
								<div class="col-lg-2 col-md-4 col-sm-4 text-center">
									<div class="week"></div>
									<div class="weaDays">
										<div><img class="weaImg" src="" alt="wea_img"></div>
										<div class="tem"></div>
									</div>
								</div>
								<div class="col-lg-2 col-md-4 col-sm-4 text-center">
									<div class="week"></div>
									<div class="weaDays">
										<div><img class="weaImg" src="" alt="wea_img"></div>
										<div class="tem"></div>
									</div>
								</div>
								<div class="col-lg-2 col-md-4 col-sm-4 text-center">
									<div class="week"></div>
									<div class="weaDays">
										<div><img class="weaImg" src="" alt="wea_img"></div>
										<div class="tem"></div>
									</div>
								</div>
								<div class="col-lg-2 col-md-4 col-sm-4 text-center">
									<div class="week"></div>
									<div class="weaDays">
										<div><img class="weaImg" src="" alt="wea_img"></div>
										<div class="tem"></div>
									</div>
								</div>
								<div class="col-lg-2 col-md-4 col-sm-4 text-center">
									<div class="week"></div>
									<div class="weaDays">
										<div><img class="weaImg" src="" alt="wea_img"></div>
										<div class="tem"></div>
									</div>
								</div>
							</div>
						</div>
					</div>				
				</div>
			</div>			
		</div>
	</div>
	<div id="fade" class="black_overlay">
	</div>
	<div id="warnMsg" class="container-fluid warn_content">
		<div class="row">
			<a href="#">
				<span>监控</span>预警
				<span>2</span>条
				<img src="style/css/warn.png" alt="warn">
			</a>
		</div>
		<div class="row">
			<a href="">
				<span>传感</span>预警
				<span>5</span>条
				<img src="style/css/warn.png" alt="warn">
			</a>
		</div>
	</div>
	<div id="personalCenter" class="container-fluid white_content">
		<div class="row title">
			<span class="pull-left titleItem">个人中心</span>
			<a class="pull-right titleItem link"  onclick="CloseDiv('personalCenter','fade')">     
			  <img src="style/css/shut.png"/>  
			</a>
		</div>
		<div class="row content">
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">头像:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<a href="#" class="link"><img src="style/css/camera4.png"/></a>
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">用户名:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<input type="text" value="瑞海科技" class="input">
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">密码:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<input type="password" value="******" class="input">
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">站点:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8 siteContent">
					<div class="siteContentItem">云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,</div>
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">摄像头:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8 siteContent">
					<div class="siteContentItem">camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•</div>
				</div>
			</div>		
		</div>
		<div class="row">
			<div class="row date">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<sapn>创建日期:</span>
				</div>
				<div class="col-lg-10 col-md-9 col-sm-9">
					<div class="creatDate">2019-01-19</div>
				</div>
			</div>
			<div class="row date">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<span>修改日期:</span>
				</div>
				<div class="col-lg-10 col-md-9 col-sm-9">
					<div class="editDate">2019-01-24</div>
				</div>
			</div>
		</div>
		<div class="row btns text-center">
			<input type="submit" value="保存" class="save">
			<a href="#" class="cancel" onclick="CloseDiv('personalCenter','fade')">取消</a>
		</div>			
	</div>
	<script src="style/js/public.js"></script>
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	<script>			
		var cip=returnCitySN["cip"];
		var data1='version=v1&ip='+cip;
		console.log(data1);
		$.ajax({
			type: 'GET',
			url: 'https://www.tianqiapi.com/api/',
			data: data1,
			dataType: 'JSON',
			error: function () {
				alert('网络错误');
			},
			success: function (res) {
				console.log(res);
				$("#city").html(res.city);
				$("#week").html(res.data[0].week);
				$("#date").html(res.data[0].date);
				$("#minimumTem").html(res.data[0].tem2);
				$("#maximumTem").html('/'+res.data[0].tem1);
				$("#weaImg").attr('src', "style/css/" + res.data[0].wea_img + ".png");
				$("#air").html(res.data[0].air);
				$("#airLevel").html(res.data[0].air_level);
				$("#win").html(res.data[0].win[0]);
				$("#winSpeed").html(res.data[0].win_speed);
				$("#tem").html(res.data[0].tem);
				$("#airTips").html(res.data[0].air_tips);
				$(".week").each(function(i, domEle){
					$(this).html(res.data[i+1].day);
			    });
			    $(".weaImg").each(function(i, domEle){
					$(this).attr('src', "style/css/" + res.data[i+1].wea_img + ".png");
			    });
			    $(".tem").each(function(i, domEle){
					$(this).html(res.data[i+1].tem);
			    });
			}
		});
	</script>	
</body>
</html>